import React, {useState, useRef} from 'react'
import {PageHeaderWrapper} from '@ant-design/pro-layout'
import ProTable, {ProColumns, ActionType} from '@ant-design/pro-table'
import {connect} from 'umi'
import {queryContractSubjectList, saveSubjectInfo, deleteEmployerCompanyById} from '../service'
import {Divider, message, Popconfirm, Button, notification} from 'antd'
import AddForm from './components/AddForm'

const TableList = () => {
  const actionRef = useRef();
  const [visible, setVisible] = useState(null);
  const [record, setRecord] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleCancel = () => {
    setVisible(false);
    setRecord(null);
  };

  const handleSubmit = (values) => {
    setLoading(true);
    saveSubjectInfo(values).then((res) => {
      if (res.flag) {
        message.success('操作成功！');
        handleCancel();
        actionRef.current.reload();
      } else {
        notification.error({
          message: `请求错误 ${res.status}`,
          description: res.error,
        });
      }
      setLoading(false)
    })
  };

  const addOrEditSubject = (record) => {
    setVisible(true);
    if (record) {
      setRecord(record);
    }
  };

  const delSubject = (id) => {
    deleteEmployerCompanyById(id).then(res => {
      if (res.flag) {
        message.success('删除成功！');
        actionRef.current.reload()
      } else {
        message.error(res.error)
      }
    })
  };

  const columns = [
    {
      title: '甲方id',
      hideInSearch: true,
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: '甲方名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '法人姓名',
      dataIndex: 'representative',
      align: 'center',
    },
    {
      title: '企业性质',
      dataIndex: 'property',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '注册地址',
      dataIndex: 'registeredAddress',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '监印员名称',
      dataIndex: 'initiatorName',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: '10%',
      render: (item, record) => (
        <>
          <a onClick={() => addOrEditSubject(record)}>修改</a>
          <Divider type="vertical"/>
          <Popconfirm title={`是否确认删除?`}
                      onConfirm={() => delSubject(record.id)}
                      okText="是" cancelText="否">
            <a>删除</a>
          </Popconfirm>
        </>
      ),
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        request={(params) => queryContractSubjectList(params)}
        columns={columns}
        toolBarRender={(action, {selectedRows}) => [
          <Button type="primary" onClick={() => addOrEditSubject(null)}>新建</Button>,
        ]}
      />
      <AddForm
        record={record}
        loading={loading}
        visible={visible}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
};

export default connect(() => ({}))(TableList)
